<template>
  <div class="chart-container app-container nohead">
    <el-alert
      title="免责声明：Highcharts组件不属于JSBOS产品，只用于介绍第三方组件如何在《智慧云学院》中使用。如果对这些组件感兴趣，请使用正版。"
      type="warning"
      :closable="false"
      class="mb-10"
    />
    <highcharts
      :options="chartOptions"
      :callback="myCallback"
      style="height: 530px; margin-top: 30px"
      ref="highcharts"
    ></highcharts>
  </div>
</template>

<script>
import { Chart } from "highcharts-vue";
import Highcharts from "highcharts";
import HighchartsMore from "highcharts/highcharts-more";
HighchartsMore(Highcharts);

export default {
  name: "extend-graphDemo-highchartsGauge",
  components: {
    highcharts: Chart,
  },
  data() {
    return {
      timer: null,
      chartOptions: {
        chart: {
          type: "gauge",
          alignTicks: false,
          plotBackgroundColor: null,
          plotBackgroundImage: null,
          plotBorderWidth: 0,
          plotShadow: false,
        },
        title: {
          text: "双刻度仪表图",
        },
        pane: {
          startAngle: -150,
          endAngle: 150,
        },
        credits: {
          enabled: false,
        },
        yAxis: [
          {
            min: 0,
            max: 200,
            lineColor: "#339",
            tickColor: "#339",
            minorTickColor: "#339",
            offset: -25,
            lineWidth: 2,
            labels: {
              distance: -20,
              rotation: "auto",
            },
            tickLength: 5,
            minorTickLength: 5,
            endOnTick: false,
          },
          {
            min: 0,
            max: 124,
            tickPosition: "outside",
            lineColor: "#933",
            lineWidth: 2,
            minorTickPosition: "outside",
            tickColor: "#933",
            minorTickColor: "#933",
            tickLength: 5,
            minorTickLength: 5,
            labels: {
              distance: 12,
              rotation: "auto",
            },
            offset: -20,
            endOnTick: false,
          },
        ],
        series: [
          {
            name: "速度",
            data: [80],
            dataLabels: {
              formatter: function () {
                var kmh = this.y,
                  mph = Math.round(kmh * 0.621);
                return (
                  '<span style="color:#339">' +
                  kmh +
                  " km/h</span><br/>" +
                  '<span style="color:#933">' +
                  mph +
                  " mph</span>"
                );
              },
              backgroundColor: {
                linearGradient: {
                  x1: 0,
                  y1: 0,
                  x2: 0,
                  y2: 1,
                },
                stops: [
                  [0, "#DDD"],
                  [1, "#FFF"],
                ],
              },
            },
            tooltip: {
              valueSuffix: " km/h",
            },
          },
        ],
      },
    };
  },
  mounted() {},
  beforeDestroy() {
    if (!this.timer) {
      return;
    }
    clearInterval(this.timer);
    this.timer = null;
  },

  methods: {
    myCallback() {
      this.timer = setInterval(() => {
        let inc = Math.floor(Math.random() * 200) + 1;
        let list = [];
        list.push(inc);
        this.chartOptions.series[0].data = list;
      }, 3000);
    },
  },
};
</script>
